<template>
  <div>
    <van-nav-bar
        title="注册"
        left-text="去登录"
        right-text="返回我的"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <div>
      <div>
        <van-form >
          <van-field
              v-model="phone"
              name="phone"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
              v-model="password_again"
              type="password"
              name="password_again"
              label="再次输入"
              placeholder="再次输入密码"
              :rules="[{ required: true, message: '请再次填写密码' }]"
          />
          <van-field
  v-model="sms"
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
>
  <template #button>
    <van-button size="small" type="primary" @click="send_sms">{{ sms_interval }}</van-button>
  </template>
</van-field>

          <div style="padding: 5px;">



                <van-button round type="info" native-type="submit" block @click="sms_register">注册
                </van-button>



            <!--    <van-button round block type="info" native-type="submit">{{ sms_interval }}</van-button>-->
          </div>
        </van-form>


      </div>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "Register",
  data() {
    return {
      username: '',
      password: '',
      password_again: '',
      phone: '',
      sms: '',
      sms_interval: '获取验证码',
      is_send: false,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()

    },
    onClickRight() {
      this.$router.push('/personal')
    },
    send_sms() {
      if (this.phone === '') {
        this.is_send = true
        Toast.success('手机号不能为空');
      } else {
        this.is_send = false
      }
      if (this.is_send) return;
      this.is_send = false;
      let sms_interval_time = 60;
      this.sms_interval = "发送中...";
      let timer = setInterval(() => {
        if (sms_interval_time <= 1) {
          clearInterval(timer);
          this.sms_interval = "获取验证码";
          this.is_send = true; // 重新回复点击发送功能的条件
        } else {
          sms_interval_time -= 1;
          this.sms_interval = `${sms_interval_time}秒后再发`;
        }
      }, 1000);
      this.$axios.get(`${this.$settings.base_url}user/sms/send_sms/?mobile=${this.phone}`).then(res => {
        console.log(res.data)
        if(res.data.code===888){
          this.sms_interval = "获取验证码";
           clearInterval(timer);
         Toast.success(res.data.msg);
        }


      })
    },
    sms_register() {
      this.$axios.get(`${this.$settings.base_url}user/mobile/?mobile=${this.phone}`).then(res => {
        if (res.data.code !== 100) {
          this.$axios.post(`${this.$settings.base_url}user/register/`, {
            mobile: this.phone,
            password: this.password,
            code: this.sms
          }).then(res2 => {
            if (res2.data.code === 100) {
             Toast.success(res2.data.msg);
              this.$router.push('/login')
            } else {
              Toast.fail(res2.data.msg);

            }
          })
        } else {

          Toast.fail('该手机号已注册，请去登录');
        }
      })
    }

  }
}
</script>

<style scoped>

</style>